<template>
  <div class="contractManage">
    <div class="manage_title">
      合同管理
      <span class="manage_subtitle"
        >今天是{{ year }}年{{ month }}月{{ day }}日，合同共计<span
          style="color: #9346EB;"
          >{{ contractTotal }}</span
        >个</span
      >
      <div class="manage_add_wrap">
        <div class="manage_add">
          <div class="manage_add_text">新增合同</div>
          <div class="manage_add_icon">
            <i class="el-icon-plus"></i>
          </div>
        </div>
        <div class="contract_opt">
          <div
            class="contract_opt_item"
            @click="
              goToURL2('contractDetails', {
                type_id: item.id,
                pageType: 'create',
                product: item.product
              })
            "
            v-for="item in contractManageListData"
            :key="item.id"
          >
            <i :class="item.icon" v-if="item.icon"></i>
            <i class="iconfont icon-ziyuan1" v-else></i>
            <span>{{ item.type_name }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="testHref" style="margin: 0 0 10px 10px;">
      <span>测试连接:{{ testURL }}</span>
      <el-button
        type="text"
        v-clipboard:copy="testURL"
        v-clipboard:success="copyUrl"
        >复制地址</el-button
      >
    </div>
    <div class="contract_content">
      <div
        class="contract_content_item"
        v-for="item in contractManageListData"
        :key="item.id"
      >
        <div
          class="contract_content_item_header"
          :style="{ backgroundColor: item.color }"
        >
          <div class="item_left">
            <div class="item_title">{{ item.type_name }}</div>
            <div class="item_count">
              合计<span style="font-size:32px;"> {{ item.count }} </span>个
            </div>
          </div>
          <div
            class="item_right"
            @click="
              goToURL2('contractList', {
                type_id: item.id,
                product: item.product
              })
            "
          >
            <i :class="item.icon"></i>
            <div>进入{{ item.type_name }}</div>
          </div>
        </div>
        <div class="table_warp">
          <el-table
            :data="item.list"
            height="528"
            :header-cell-style="{
              background: `rgba(229,244,255,1)`,
              color: item.color,
              fontWeight: 400
            }"
          >
            <el-table-column
              align="center"
              prop="name"
              label="学员"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="end_date"
              label="到期时间"
            ></el-table-column>
            <el-table-column align="center" label="到期天数">
              <template slot-scope="scope">
                <span
                  :style="{
                    color: scope.row.expire_days <= 15 ? 'red' : '#333'
                  }"
                  >{{ scope.row.expire_days }}天</span
                >
              </template>
            </el-table-column>
            <el-table-column align="center" label="查看">
              <template slot-scope="scope">
                <div
                  class="table_more"
                  :style="{ color: item.color }"
                  @click="
                    goToURL('contractDetails', {
                      id: scope.row.id,
                      pageType: 'details',
                      product: item.product
                    })
                  "
                >
                  <span>更多</span>
                  <i class="iconfont icon-gengduo"></i>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="item_more_btn">
          <el-button
            :style="{ border: `1px solid ${item.color}`, color: item.color }"
            @click="
              goToURL('contractList', {
                type_id: item.id,
                product: item.product
              })
            "
            >查看更多</el-button
          >
        </div>
      </div>
    </div>
    <div class="manage_title">
      成交合同趋势
    </div>
    <div class="contract_echarts">
      <div class="echarts_btn">
        <el-radio-group v-model="currentYear" size="small" @change="changeYear">
          <el-radio-button
            :label="year"
            v-for="year in yearList"
            :key="year"
          ></el-radio-button>
        </el-radio-group>
      </div>
      <div id="contractBusiness" style="width: 100%; height: 756px;"></div>
    </div>
  </div>
</template>

<script>
import http from "@/api/contract";
import { changeTitleMinin } from "@/mixin";
export default {
  name: "contractManage",
  mixins: [changeTitleMinin],
  data() {
    return {
      testURL: "http://webi-dev.jingqiweb.com/#/testrole",
      year: new Date().getFullYear(),
      month: new Date().getMonth() + 1,
      day: new Date().getDate(),

      // 新接口数据
      contractManageListData: [],
      contractTotal: 0,
      yearList: [],
      currentYear: new Date().getFullYear(),
      statData: {},
      // echarts 数据
      contractEchartsTitle:
        new Date().getFullYear() + "年新韦博英语成交合同趋势",
      xAxisData: [
        "Jan",
        "Feb",
        "Mar",
        "Apr",
        "May",
        "Jun",
        "Jul",
        "Aug",
        "Sep",
        "Oct",
        "Nov",
        "Dec"
      ],
      seriesData: []
    };
  },
  methods: {
    //复制地址
    copyUrl(url) {
      this.$message.success("复制成功");
    },
    goToURL(name, params) {
      this.$router.push({ name, params });
    },
    goToURL2(name, params) {
      for (let item of this.contractManageListData) {
        if (item.id === params.type_id) {
          if (item.product !== "dyned") {
            this.$router.push({
              name,
              params,
              query: {
                showLevel: false,
                operation: "add",
                product: item.product
              }
            });
          } else {
            this.$router.push({
              name,
              params,
              query: {
                showLevel: true,
                operation: "add",
                product: item.product
              }
            });
          }
        }
      }
    },
    changeYear(year) {
      //console.log('year:',year);
      this.currentYear = year;
      this.updateView();
    },
    drawEcharts() {
      let option = {
        title: {
          text: this.contractEchartsTitle,
          textStyle: {
            color: "#999",
            fontWeight: "normal",
            fontSize: "22"
          },
          bottom: "3%",
          left: "center"
        },
        legend: {
          type: "scroll",
          icon: "circle",
          right: "4%",
          top: "5%"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "line" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          // 表格组件
          left: "3%",
          right: "4%",
          bottom: "10%",
          height: "74%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: this.xAxisData
          }
        ],
        yAxis: [
          {
            type: "value",
            axisLine: {
              show: false
            },
            axisTick: {
              lineStyle: {
                color: "#ccc"
              }
            },
            axisLabel: {
              color: "#999",
              fontSize: 16,
              margin: 12
            },
            nameTextStyle: {
              color: "#666",
              fontSize: 16
            }
          }
        ],
        series: this.seriesData
      };
      this.$echartsFn.draweharts("contractBusiness", option);
    },
    // 更新 echarts 视图
    updateView() {
      this.seriesData = [];
      if (
        this.statData[this.currentYear] &&
        this.statData[this.currentYear].length
      ) {
        this.statData[this.currentYear].map(item => {
          this.seriesData.push({
            name: item.type_name,
            type: "bar",
            stack: "合同",
            data: item.count,
            itemStyle: {
              normal: {
                color: item.color || "#179CEB",
                label: {
                  show: true,
                  textStyle: {
                    color: "#fff"
                  },
                  position: "insideTop",
                  formatter: function(p) {
                    return p.value > 0 ? p.value : "";
                  }
                }
              }
            }
          });
        });
      }
      this.drawEcharts();
    },

    // 获取接口数据
    getContractHome() {
      http.getContractHome().then(res => {
        console.log("getContractHome:", res);
        this.contractManageListData = res.data;
        this.contractTotal = res.count;
        this.yearList = res.year;
        if (this.yearList.indexOf(this.currentYear) == -1) {
          this.currentYear = this.yearList[0]
            ? this.yearList[0]
            : new Date().getFullYear();
        }

        this.xAxisData = res.month;
        this.statData = res.stat;

        this.updateView();
      });

      // 设置链接地址
      let center_id = JSON.parse(sessionStorage.getItem("user")).center_id;
      this.testURL = `http://webi-dev.jingqiweb.com/#/testrole?center_id=${center_id}`;
    }
  },
  created() {
    this.getContractHome();
  }
};
</script>

<style lang="scss">
.contractManage {
  height: 100%;
  padding: 0px 40px 10px;
  box-sizing: border-box;
  overflow: auto;

  &::-webkit-scrollbar {
    width: 6px;
    cursor: pointer;
    background: #f1f1f1;
  }

  &::-webkit-scrollbar:hover  {
    cursor: pointer;
        background-color: #f1f1f1;
  }

  &::-webkit-scrollbar-thumb  {
    border-radius: 20px;
    width: 3px;
    height: 10px;
    cursor: pointer;
    -webkit-transition: all .4s ease;
        transition: all .4s ease;
  }
     &::-webkit-scrollbar-thumb:hover  {
    cursor: pointer;
        background-color: #999;
  }

  &::-moz-scrollbar {
    display: none;
  }
  &::-ms-scrollbar {
    display: none;
  }
  &::-o-scrollbar {
    display: none;
  }

  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    // -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #bbb;
  }
  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    //-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 0px;
    background: #f1f1f1;
  }

  .manage_title {
    font-size: 24px;
    line-height: 72px;
    padding-top: 14px;
    position: relative;
    color: #00134e;
    .manage_subtitle {
      font-size: 18px;
      color: #999;
    }
    .manage_add_wrap {
      position: absolute;
      right: 0px;
      bottom: 9px;
      width: 120px;
      height: 38px;
      border-radius: 4px;
      .manage_add {
        display: flex;
        &_text {
          font-size: 16px;
          flex: 1;
          background: #1870ca;
          color: #fff;
          text-align: center;
          line-height: 38px;
          border-top-left-radius: 4px;
          border-bottom-left-radius: 4px;
        }
        &_icon {
          width: 38px;
          height: 38px;
          background: #07407b;
          display: flex;
          justify-content: center;
          align-items: center;
          font-family: "PingFang SC";
          border-top-right-radius: 4px;
          border-bottom-right-radius: 4px;

          & > i {
            color: #fff;
            font-size: 18px;
            -webkit-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
          }
        }
      }
      &:hover {
        & > .contract_opt {
          visibility: visible;
          opacity: 1;
          margin-top: 0;
        }
        & > .manage_add {
          .manage_add_icon {
            & > i {
              transform: rotate(45deg);
            }
          }
        }
      }

      .contract_opt {
        position: absolute;
        top: 46px;
        z-index: 200;
        width: 120px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 1px 2px 2px 0px rgba(0, 0, 0, 0.17);
        border-radius: 5px;

        visibility: hidden;
        opacity: 0;
        -webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        margin-top: 20px;

        &_item {
          cursor: pointer;
          line-height: 38px;
          & > i {
            font-size: 18px;
            margin: 0px 3px 0px 10px;
          }
          & > span {
            font-size: 16px;
            line-height: 38px;
            position: relative;
            top: -1px;
          }
          &:hover {
            background: #eaeaea;
          }
        }
        &:before {
          content: "";
          position: absolute;
          left: 40px;
          top: -6px;
          border-left: 6px dashed transparent;
          border-right: 6px dashed transparent;
          border-bottom: 6px solid #fff;
          font-size: 0;
          line-height: 0;
        }
      }
    }
  }
  .contract_content {
    width: 100%;
    display: flex;
    // justify-content: space-between;
    align-items: flex-start;
    overflow: auto;

    &_item {
      width: calc(33.33% - 28px);
      min-width: 368px;
      margin-right: 10px;
      &:nth-last-child(1) {
        margin-right: 0px;
      }
      &:nth-child(1) {
        .contract_content_item_header {
          background-color: #17b5eb;
          background-image: linear-gradient(to right, #17b5eb, #1797eb);
        }
        .table_warp {
          .table_more {
            color: #1797eb;
          }
          .el-table {
            thead {
              color: #1797eb;
            }
          }
          .el-table__header {
            tr {
              background-color: rgba(229, 244, 255, 1);
            }
            th {
              background-color: rgba(229, 244, 255, 1);
            }
          }
        }
      }

      &_header {
        color: #fff;
        padding: 17px 42px;
        display: flex;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        .item_left {
          flex: 1;
          font-size: 18px;
        }
        .item_right {
          width: 96px;
          text-align: center;
          font-size: 14px;
          cursor: pointer;
          & > i {
            font-size: 26px;
            margin-top: 5px;
          }
          & > div {
            margin-top: 3px;
          }
        }
      }
      .table_warp {
        .table_more {
          cursor: pointer;
          text-align: center;
          & > i {
            font-size: 14px;
            position: relative;
            top: 1px;
            left: -2px;
          }
        }
        .el-table__header {
          font-size: 18px;
        }
      }
      .item_more_btn {
        text-align: center;
        background: #fff;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        .el-button {
          width: 234px;
          height: 38px;
          margin: 27px auto 32px;
        }
      }
    }
  }

  .contract_echarts {
    background: #fff;
    margin-bottom: 10px;
    position: relative;
    .echarts_btn {
      position: absolute;
      top: 4%;
      left: 3%;
      z-index: 100;
    }
  }
}
</style>
